import React, { Component } from "react";

class App extends Component {
  // 希望数据有响应式，才放到state对象里面
  state = {
    name: "zhangsan",
    count: 3,
  };

  handleClick = () => {
    // 如果希望改变state的值，那么需要使用setState方法

    // setState方法是异步的
    // 1. 里面直接传入一个对象,对象里面就是要改的值
    // 里面是可以传入第二个参数，是一个回调函数，会在改变结束以后调用
    // this.setState(
    //   {
    //     name: "lisi",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //   }
    // );

    // +1既不能a++，也不能++a
    // this.setState({
    //   count: this.state.count + 1,
    // });

    // 2. 里面直接传入一个函数, 这个函数可以接收一个参数是prevState(前一次的state的值)
    // 这种写法也可以传入可选的第二个参数回调函数
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );

    // 如果这一次的改变和改变前无关的时候，写成对象的方式更加简单
    // 如果这一次的改签要基于改变前的值，写成函数的方式更加安全

    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));

    // setState方法是同步还是异步
    // 从18版本开始，所有的setState都是异步的

    // 在18版本之前，是分情况的
    // 在合成事件和生命周期里面是异步的
    // 在定时器里面和原生js事件监听里面是同步的
  };

  render() {
    return (
      <>
        <h2>setState</h2>
        <div>name: {this.state.name}</div>
        <div>count: {this.state.count}</div>
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }

  // componentDidMount() {
  //   setTimeout(() => {
  //     this.setState({
  //       count: 10,
  //     });
  //     console.log(this.state.count);
  //   }, 2000);

  //   window.addEventListener("click", () => {
  //     this.setState({
  //       count: 10,
  //     });
  //     console.log(this.state.count);
  //   })
  // }
}

export default App;
